<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="iconfont icon-arrow-left">‹</text>
				</view>
				<view class="navbar-title">个人资料</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 个人资料内容 -->
		<view class="profile-content">
			<!-- 头像部分 -->
			<view class="profile-item">
				<view class="item-left">
					<text class="item-label">头像</text>
				</view>
				<view class="item-right">
					<view class="avatar-container">
						<image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
						<view class="edit-icon">
							<text class="iconfont">✓</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 昵称部分 -->
			<view class="profile-item">
				<view class="item-left">
					<text class="item-label">昵称</text>
				</view>
				<view class="item-right">
					<u-input class="item-value" v-model="form.nickname" placeholder="请输入昵称"></u-input>
				</view>
			</view>
			<view class="profile-item">
				<view class="item-left">
					<text class="item-label">手机号</text>
				</view>
				<view class="item-right">
					<u-input class="item-value" v-model="form.phone" placeholder="请输入手机号"></u-input>
				</view>
			</view>
			<!-- 无更改按钮 -->
			<view class="no-change-btn">
				<text class="btn-text" @click="save">保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'

	export default {
		data() {
			return {
				form: {
					nickname: '',
					phone: ''
				},
				userInfo: {
					avatar: '',
					nickname: '',
					phone:''
				},
				defaultAvatar: '/static/images/default-avatar.png'
			}
		},

		onLoad() {
			this.getUserInfo()
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			async save() {
				const params = {
				  mobile: this.form.phone,
				  nickname: this.form.nickname
				};
				const response = await UserApi.updateUserInfo(params);
				if (response.code === 0) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					// 回到上一级页面
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: response.msg || '创建失败',
						icon: 'none'
					});
				}

			},



			// 获取用户信息
			getUserInfo() {
				UserApi.info()
					.then(result => {
						if (result.code === 0 && result.data) {
							this.userInfo = {
								avatar: result.data.avatar,
								nickname: result.data.nickname,
								phone: result.data.mobile
							},
							this.form = {
								nickname: result.data.nickname,
								phone: result.data.mobile
							}
						}
					})
					.catch(err => {
						console.error('获取用户信息失败:', err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		background-color: #fff;
		padding-top: var(--status-bar-height);
		border-bottom: 1px solid #eee;
	}

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 16px;
	}

	.navbar-left {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-left text {
		font-size: 20px;
		color: #333;
		font-weight: bold;
	}

	.navbar-title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.navbar-right {
		width: 44px;
	}

	/* 个人资料内容 */
	.profile-content {
		padding: 20px 16px;
	}

	.profile-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 16px 20px;
		margin-bottom: 12px;
		border-radius: 8px;
	}

	.item-left {
		flex-shrink: 0;
	}

	.item-label {
		font-size: 16px;
		color: #333;
	}

	.item-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.item-value {
		font-size: 16px;
		color: #666;
	}

	/* 头像样式 */
	.avatar-container {
		position: relative;
		width: 60px;
		height: 60px;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 30px;
		background-color: #f0f0f0;
	}

	.edit-icon {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 20px;
		height: 20px;
		background-color: #007AFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #fff;
	}

	.edit-icon text {
		font-size: 12px;
		color: #fff;
	}

	/* 无更改按钮 */
	.no-change-btn {
		background-color: #007AFF;
		border-radius: 25px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40px;
	}

	.btn-text {
		font-size: 16px;
		color: #fff;
	}
</style>